import React from 'react';
import {Popover} from "antd";


const SmallCateCard = ({data,onClickCard}) => {
    return (<div
        onClick={()=>onClickCard(data)}
        className="w-32 h-10 rounded-lg  bg-gradient-to-br from-purple-500 to-pink-500 text-white   flex justify-center  items-center m-1 cursor-pointer">{data.sort_name}
    </div>)
}
const content = (data,onChildCate) => {
    return (<div className="grid grid-cols-3  md:grid-cols-8">
        {data.secondPsortList.map(item => <SmallCateCard onClickCard={child=>onChildCate(data,child)}  key={item.id} data={item}></SmallCateCard>)}
    </div>)
}

function Index({data,onChildCate}) {
    return (
        <Popover content={content(data,onChildCate)}>
            <div
                className=" w-32 h-32 rounded-lg shadow-md border flex flex-col justify-center items-center bg-amber-300 text-white cursor-pointer "
                style={{background: `url(${data.picture})  no-repeat 0% 0% / cover`,}}
            >
                <p className='mt-20'>{data.sort_name}</p>
            </div>
        </Popover>
    );
}

export default Index;